<!DOCTYPE html>
<html lang="en">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <meta content="no-cache" http-equiv="Cache-Control" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="telephone=no" name="format-detection" />
  <title>个人资料</title>
  <link rel="stylesheet" href="../css/weui.min.css">
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/mint-ui.css">
  <style>
    .main {
      background: url("../img/user-top-bg.png") no-repeat top, #fff2f2;
      background-size: 100% auto;
    }

    body {
      -webkit-user-select:text!important;
    }
  </style>
</head>
<body>
<div class="weui-mask loading-bg"></div>

<div class="main" id="app" style="overflow: hidden">

  <!--<div class="user-header weui-flex" v-if="userInfo">
    &lt;!&ndash;<div class="blur bg-image" :style="{ 'background-image': 'url(' + userObj.HeadImgUrl + ')' }"></div>&ndash;&gt;
    <img src="../img/default-header.png" :data-src="userObj.HeadImgUrl" class="header">
    <div class="info-block weui-flex__item">
      <div class="weui-flex">
        <input type="text" maxlength="7" v-model="userObj.NickName" class="username" @change="updateUser('NickName', userObj.NickName)">
        <div class="weui-flex__item" style="text-align: center">ID：{{userObj.UserNo}}</div>
      </div>
      <div class="weui-flex" style="line-height: 2.5rem">
        <span class="weui-flex__item">诚信分：{{userObj.Sincerity || ''}}</span>
        <div class="weui-flex__item" @click="jumpToMB"><button class="weui-btn weui-btn_mini weui-btn_default">看留言板</button></div>
        <input v-if="!taOpenId" class="weui-switch" type="checkbox" v-model="editting" :disabled="registFlag">
      </div>
    </div>
  </div>-->


  <div class="weui-tab">
    <div class="weui-navbar user-tabs">
      <div class="weui-navbar__item " :class="{'weui-bar__item_on': activeIndex == 0}" @click="baseInfoFlag ? activeIndex = 0 : ''">
        必填信息
      </div>
      <div class="weui-navbar__item" :class="{'weui-bar__item_on': activeIndex == 1}" @click="baseInfoFlag ? activeIndex = 1 : ''">
        一般要求
      </div>
      <div class="weui-navbar__item" :class="{'weui-bar__item_on': activeIndex == 2}" @click="baseInfoFlag ? activeIndex = 2 : ''">
        习惯社交
      </div>
      <div class="weui-navbar__item" :class="{'weui-bar__item_on': activeIndex == 3}" @click="baseInfoFlag ? activeIndex = 3 : ''">
        婚恋孕育
      </div>
    </div>

    <div class="info-title weui-flex" v-if="activeIndex != 0">
      <div class="weui-flex__item">我的情况</div>
      <div class="weui-flex weui-flex__item edit-btn">
        <input v-if="!taOpenId" class="weui-switch" type="checkbox" v-model="editting" :disabled="registFlag">
      </div>
      <div class="weui-flex__item" style="text-align: right">我希望ta的情况</div>
    </div>

    <div class="weui-tab__panel user-options">
      <div class="tab-content" :class="{'hide': activeIndex != 0}" style="background: none">
        <!--<div class="weui-cell edit-btn" v-if="!taOpenId">
          <div class="weui-cell__hd"><label class="weui-label">编辑以下个人资料</label></div>
          <div class="weui-cell__bd weui-flex" style="justify-content: flex-end"><input v-if="!taOpenId" class="weui-switch" type="checkbox" v-model="editting" :disabled="registFlag" style="margin-right: -10px"></div>
        </div>-->
        <div class="user-header weui-flex" v-if="userInfo">
          <!-- <img :src="'http://www.jot8.com' + userObj.HeadImgUrl" class="header" @click="uploadImage" @load="hideMask" @error="hideMask"> -->
          <div class="info-block weui-flex__item" ref="topBlock">
            <div class="weui-cells weui-cells_form">
              <!--<div class="weui-cell weui-flex" >
                <div class="weui-cell__hd"><label class="weui-label">昵称 <span class="small-font" v-if="!taOpenId">(点击编辑)</span></label></div>
                <div class="weui-cell__bd weui-flex weui-flex__item">
                  <input type="text" maxlength="7" v-model="userObj.NickName" class="username weui-flex__item" :disabled="taOpenId" @change="updateUserObj.NickName = userObj.NickName">
                </div>
              </div>-->
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">诚信分</label></div>
                <div class="weui-cell__bd">
                  {{userObj.Sincerity}}
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">ID <span class="small-font">(长按复制)</span></label></div>
                <div class="weui-cell__bd">{{userObj.UserNo}}</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">个人资料完整度</label></div>
                <div class="weui-cell__bd">{{Math.ceil(userObj.Integrity * 100)}}%</div>
              </div>
              <div class="weui-cell" v-if="!taOpenId" @click="jumpToPower">
                <div class="weui-cell__hd"><label class="weui-label">积分</label></div>
                <div class="weui-cell__bd">{{addCount || 0}} <img class="icon-arrow" src="../img/icon-user-arrow.png"></div>
              </div>
              <div class="weui-cell" @click="jumpToMB">
                <div class="weui-cell__hd"><label class="weui-label">留言板</label></div>
                <div class="weui-cell__bd "><img class="icon-arrow" src="../img/icon-user-arrow.png"></div>
              </div>
              <!--<div class="weui-cell" v-if="!taOpenId">
                <div class="weui-cell__hd"><label class="weui-label">编辑以下个人资料</label></div>
                <div class="weui-cell__bd weui-flex" style="justify-content: flex-end"><input v-if="!taOpenId" class="weui-switch" type="checkbox" v-model="editting" :disabled="registFlag" style="margin-right: -10px"></div>
              </div>-->
            </div>
          </div>
        </div>

        <div class="weui-cells weui-cells_form info">
          <div class="base-info">
            <div class="weui-cell edit-btn" v-if="!taOpenId">
              <div class="weui-cell__hd"><label class="weui-label">编辑以下个人资料</label></div>
              <div class="weui-cell__bd weui-flex" style="justify-content: flex-end"><input class="weui-switch" type="checkbox" v-model="editting" :disabled="registFlag"></div>
            </div>
            <div class="weui-cell weui-flex header-img" >
              <div class="weui-cell__hd"><label class="weui-label">头像</label></div>
              <div class="weui-cell__bd">
                <img src="../img/default-header.png" :data-src="userObj.HeadImgUrl" class="header" @click="uploadImage" @load="hideMask" @error="hideMask">
              </div>
            </div>
            <div class="weui-cell weui-flex" >
              <div class="weui-cell__hd"><label class="weui-label">昵称 <span class="small-font" v-if="!taOpenId && false">(点击编辑)</span></label></div>
              <div class="weui-cell__bd introduction">
                <input type="text" maxlength="7" v-model="userObj.NickName" class="weui-input" :disabled="taOpenId" @change="updateUser('NickName', userObj.NickName)" v-show="editting">
                <span v-show="editting" class="count-length">{{userObj.NickName.length}}/7</span>
                <div v-show="!editting">{{userObj.NickName}}</div>
              </div>
            </div>
            <div class="weui-cell weui-flex weui-cells_radio" >
              <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
              <div class="weui-cell__bd weui-flex sex-block" :class="{ edit: editting }">
                <label class="weui-check__label" for="male" v-show="editting">
                  <input type="radio" name="sex" id="male" class="weui-check" :checked="userObj.sex == '男'" @click.stop.prevent="updateUser('MyField0', '男')">
                  <span class="weui-icon-checked"></span>
                  &nbsp;&nbsp;&nbsp;男
                </label>
                <label class="weui-check__label" for="female" v-show="editting">
                  <input type="radio" name="sex" id="female" class="weui-check" :checked="userObj.sex == '女'" @click.stop.prevent="updateUser('MyField0', '女')">
                  <span class="weui-icon-checked"></span>
                  &nbsp;&nbsp;&nbsp;女
                </label>
                <span v-show="!editting">{{userObj.sex}}</span>
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">自我简介</label></div>
              <div class="weui-cell__bd introduction">
                <input class="weui-input" type="text"  placeholder="单行输入" maxlength="11" v-model="userObj.Introduction" @change="updateUser('Introduction', userObj.Introduction)" v-show="editting">
                <span class="count-length" v-show="editting">{{userObj.Introduction.length}}/11</span>
                <div v-show="!editting">{{userObj.Introduction}}</div>
              </div>
            </div>
            <div class="weui-cell birthday">
              <div class="weui-cell__hd"><label class="weui-label">我的生日</label></div>
              <div class="weui-cell__bd">
                <div class="birthday-value" :class="{ edit: editting }" @click="selectBirthday(userObj.MyField147)">{{userObj.MyField147 || '请选择生日'}}</div>
              </div>
            </div>
            <div class="weui-cell" @click="showPopup('age')">
              <div class="weui-cell__hd"><label class="weui-label">要求ta的出生年份</label></div>
              <div class="weui-cell__bd weui-flex">
                {{TaField147_1}}年 - {{TaField147_2}}年
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">我的身高</label></div>
              <div class="weui-cell__bd stature">
                <input class="weui-input" type="tel" maxlength="3" name="select2" v-model="userObj.MyField148" @change="updateUser('MyField148', userObj.MyField148)" v-show="editting">
                <!--  <option value="">请选择</option>
                  <option v-for="stature in statureList">{{stature}}</option>
                </select>--><div v-show="!editting">{{userObj.MyField148}}</div>cm
              </div>
            </div>
            <div class="weui-cell" @click="showPopup('stature')">
              <div class="weui-cell__hd"><label class="weui-label">要求ta的身高范围</label></div>
              <div class="weui-cell__bd weui-flex">
                {{TaField148_1}}cm - {{TaField148_2}}cm
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">可被匹配到</label></div>
              <div class="weui-cell__bd weui-flex can-search"><input class="weui-switch" type="checkbox" v-model="canSearch" :disabled="!editting" @change="updateUser('CanSearch', canSearch ? 'T' : 'F')"></div>
            </div>
            <div class="weui-cell area" v-if="userObj">
              <div class="weui-cell__hd"><label class="weui-label">我的常住地</label></div>
              <div class="weui-cell__bd">
                <div v-show="!editting">{{provinceList[parseInt(userObj.Province) - 1]}}/{{cities[parseInt(userObj.City)]}}</div>
                <select class="weui-select" name="select2" v-model="userObj.Province" @change="updateUser('Province', userObj.Province)" v-show="editting">
                  <option value="-1" disabled hidden>请选择</option>
                  <option v-for="(province, pIndex) in provinceList" :value="pIndex + 1">{{province}}</option>
                </select>
                <select class="weui-select" name="select2" v-model="userObj.City" @change="updateUser('City', userObj.City)" v-show="editting">
                  <option value="-1" disabled hidden>请选择</option>
                  <option v-for="(city, cIndex) in cities" :value="cIndex">{{city}}</option>
                </select>
              </div>
            </div>
          </div>
          <div class="bottom-btn" v-if="registFlag">
            <a href="javascript:;" class="weui-btn weui-btn_primary" @click="checkBaseInfo">保存进入下一步</a>
          </div>
        </div>
      </div>

      <div class="tab-content" :class="{'hide': activeIndex != 1}">
        <div class="question-list weui-cells_radio" v-if="questions">
          <div class="question-item" v-for="(question, index) in questions.essentialInfo">
            <div class="question-item-title">{{question.title}}</div>
            <div class="question-item-option weui-flex" v-for="(option, oIndex) in question.options" :class="{ 'hairline-bottom': oIndex < question.options.length - 1 }">
              <div class="left-option">
                <label class="weui-check__label" :for="question.id + '-' + oIndex + '-me'" v-if="question.mySeletedType == 0">
                  <input type="radio" :name="question.id + '-me'" class="weui-check" :id="question.id + '-' + oIndex + '-me'" @change="selectedVal(question.id, 'my', option, question.mySeletedType, question.hisDefault, question.options, oIndex)" :checked="question.myChecked && question.myChecked == option ? true : false">
                  <span class="weui-icon-checked"></span>
                </label>
                <div v-if="question.mySeletedType == 1">
                  <input type="checkbox" class="weui-agree__checkbox" @change="selectedVal(question.id, 'my', option, question.mySeletedType, question.hisDefault, question.options, oIndex)" :checked="question.myChecked && question.myChecked.split(',').indexOf(option) >= 0 ? true : false">
                </div>
              </div>
              <div class="weui-flex__item">{{option}}</div>

              <div class="right-option">
                <label class="weui-check__label" :for="question.id + '-' + oIndex + '-him'" v-if="question.hisSeletedType == 0">
                  <input type="radio" :name="question.id + '-him'" class="weui-check" :id="question.id + '-' + oIndex + '-him'" @change="selectedVal(question.id, 'ta', option, question.hisSeletedType)" :checked="question.hisChecked && question.hisChecked == option ? true : false">
                  <span class="weui-icon-checked"></span>
                </label>
                <div v-if="question.hisSeletedType == 1">
                  <input type="checkbox" class="weui-agree__checkbox" @change="selectedVal(question.id, 'ta', option, question.hisSeletedType)" :checked="question.hisChecked && question.hisChecked.split(',').indexOf(option) >= 0 ? true : false">
                </div>
              </div>
          </div>
          </div>
        </div>
        <div class="bottom-btn" v-if="registFlag">
          <a href="javascript:;" class="weui-btn weui-btn_primary" @click="activeIndex++">保存进入下一步</a>
        </div>
      </div>

      <div class="tab-content" :class="{'hide': activeIndex != 2}">
        <div class="question-list weui-cells_radio" v-if="questions">
          <div class="question-item" v-for="(question, index) in questions.socialHabit">
            <div class="question-item-title">{{question.title}}</div>
            <div class="question-item-option weui-flex" v-for="(option, oIndex) in question.options" :class="{ 'hairline-bottom': oIndex < question.options.length - 1 }">
              <div class="left-option">
                <label class="weui-check__label" :for="question.id + '-' + oIndex + '-me'" v-if="question.mySeletedType == 0">
                  <input type="radio" :name="question.id + '-me'" class="weui-check" :id="question.id + '-' + oIndex + '-me'" @change="selectedVal(question.id, 'my', option, question.mySeletedType, question.hisDefault, question.options, oIndex)" :checked="question.myChecked && question.myChecked == option ? true : false">
                  <span class="weui-icon-checked"></span>
                </label>
                <div v-if="question.mySeletedType == 1">
                  <input type="checkbox" class="weui-agree__checkbox" @change="selectedVal(question.id, 'my', option, question.mySeletedType, question.hisDefault, question.options, oIndex)" :checked="question.myChecked && question.myChecked.split(',').indexOf(option) >= 0 ? true : false">
                </div>
              </div>
              <div class="weui-flex__item">{{option}}</div>

              <div class="right-option">
                <label class="weui-check__label" :for="question.id + '-' + oIndex + '-him'" v-if="question.hisSeletedType == 0">
                  <input type="radio" :name="question.id + '-him'" class="weui-check" :id="question.id + '-' + oIndex + '-him'" @change="selectedVal(question.id, 'ta', option, question.hisSeletedType)" :checked="question.hisChecked && question.hisChecked == option ? true : false">
                  <span class="weui-icon-checked"></span>
                </label>
                <div v-if="question.hisSeletedType == 1">
                  <input type="checkbox" class="weui-agree__checkbox" @change="selectedVal(question.id, 'ta', option, question.hisSeletedType)" :checked="question.hisChecked && question.hisChecked.split(',').indexOf(option) >= 0 ? true : false">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-btn" v-if="registFlag">
          <a href="javascript:;" class="weui-btn weui-btn_primary" @click="activeIndex++">保存进入下一步</a>
        </div>
      </div>

      <div class="tab-content" :class="{'hide': activeIndex != 3}">
        <div class="question-list weui-cells_radio" v-if="questions">
          <div class="question-item" v-for="(question, index) in questions.LAM">
            <div class="question-item-title">{{question.title}}</div>
            <div class="question-item-option weui-flex" v-for="(option, oIndex) in question.options" :class="{ 'hairline-bottom': oIndex < question.options.length - 1 }">
              <div class="left-option">
                <label class="weui-check__label" :for="question.id + '-' + oIndex + '-me'" v-if="question.mySeletedType == 0">
                  <input type="radio" :name="question.id + '-me'" class="weui-check" :id="question.id + '-' + oIndex + '-me'" @change="selectedVal(question.id, 'my', option, question.mySeletedType, question.hisDefault, question.options, oIndex)" :checked="question.myChecked && question.myChecked == option ? true : false">
                  <span class="weui-icon-checked"></span>
                </label>
                <div v-if="question.mySeletedType == 1">
                  <input type="checkbox" class="weui-agree__checkbox" @change="selectedVal(question.id, 'my', option, question.mySeletedType, question.hisDefault, question.options, oIndex)" :checked="question.myChecked && question.myChecked.split(',').indexOf(option) >= 0 ? true : false">
                </div>
              </div>
              <div class="weui-flex__item">{{option}}</div>

              <div class="right-option">
                <label class="weui-check__label" :for="question.id + '-' + oIndex + '-him'" v-if="question.hisSeletedType == 0">
                  <input type="radio" :name="question.id + '-him'" class="weui-check" :id="question.id + '-' + oIndex + '-him'" @change="selectedVal(question.id, 'ta', option, question.hisSeletedType)" :checked="question.hisChecked && question.hisChecked == option ? true : false">
                  <span class="weui-icon-checked"></span>
                </label>
                <div v-if="question.hisSeletedType == 1">
                  <input type="checkbox" class="weui-agree__checkbox" @change="selectedVal(question.id, 'ta', option, question.hisSeletedType)" :checked="question.hisChecked && question.hisChecked.split(',').indexOf(option) >= 0 ? true : false">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-btn" v-if="registFlag">
          <a href="javascript:;" class="weui-btn weui-btn_primary" @click="register">注册</a>
        </div>
      </div>
    </div>
    <mt-popup
            v-model="popupVisible"
            position="bottom" style="width: 100%" >
      <mt-picker :slots="ageSlots" @change="onAgeValuesChange" v-show="showPopupType == 'age'"></mt-picker>
      <mt-picker :slots="statureSlots" @change="onStatureValuesChange" v-show="showPopupType == 'stature'"></mt-picker>
    </mt-popup>
  </div>
</div>
<script type="text/javascript" src="../js/tools/weui.js"></script>
<script type="text/javascript" src="../js/tools/vue.js"></script>
<script type="text/javascript" src="../js/tools/mint-ui.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../js/tools/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/serviceInterface/serviceInterface.js"></script>
<script type="text/javascript" src="../js/common/questions.js"></script>
<script type="text/javascript" src="../js/pages/userInfo.js"></script>
</body>
</html>